<template>
  <div class="chartBox">
    <div class="chartBox-title">生物资产统计</div>
    <div class="chartBox-detail">
      <div class="chartBox-detail-left">
        <div class="info">
          <svgIcon name="stock" width="60px" height="60px"></svgIcon>
          <div class="detail">
            <div class="text">今日存栏</div>
            <div class="num">{{ stockNumAll }}</div>
          </div>
        </div>
        <div class="info">
          <svgIcon name="jrst" style="border-radius: 5px" width="60px" height="60px"></svgIcon>
          <div class="detail">
            <div class="text">今日死淘</div>
            <div class="num">{{ dieoutNumAll }}</div>
          </div>
        </div>
        <div class="info">
          <svgIcon name="sjrjm" width="60px" height="60px"></svgIcon>
          <div class="detail">
            <div class="text">今日进苗</div>
            <div class="num">{{ collarSeedlingNumAll }}</div>
          </div>
        </div>
        <div class="info">
          <svgIcon name="jrss" width="60px" height="60px"></svgIcon>
          <div class="detail">
            <div class="text">今日上市</div>
            <div class="num">{{ beListedNumAll }}</div>
          </div>
        </div>
      </div>
      <div class="chartBox-detail-right">
        <div style="width: 100%; height: 400px">
          <MyEchart :option="dataSource"></MyEchart>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, computed } from 'vue'
import { getBiologicalAssetsInfo } from '@/api/api'
import MyEchart from '@/components/echarts/MyCharts2.vue'
import { useRoute } from 'vue-router'
import { useBaseParamStore } from '@/stores/baseParams'

const baseParamStore = useBaseParamStore()
const route = useRoute()
let xData = ref([])
let stockNum = ref([])
let collarSeedlingNum = ref([])
let beListedNum = ref([])
let dieoutNum = ref([])

// 统计
let stockNumAll = ref(0)
let collarSeedlingNumAll = ref(0)
let beListedNumAll = ref(0)
let dieoutNumAll = ref(0)

function formatDateToMD(dateStr: string): string {
  const date = new Date(dateStr)
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始
  const day = String(date.getDate()).padStart(2, '0')
  return `${month}/${day}`
}
// 现场巡查统计
const featchBiologicalAssetsInfo = async () => {
  try {
    const res = await getBiologicalAssetsInfo({
      orgId: baseParamStore.baseParam.orgId
    })
    if (res && res.data) {
      let { data } = res

      stockNumAll.value = data.stockNum
      collarSeedlingNumAll.value = data.collarSeedlingNum
      beListedNumAll.value = data.beListedNum
      dieoutNumAll.value = data.dieoutNum

      data.biologicalAssetsVoList?.forEach((item) => {
        xData.value.push(formatDateToMD(item.dateTime))
        stockNum.value.push(item.stockNum)
        collarSeedlingNum.value.push(item.collarSeedlingNum)
        beListedNum.value.push(item.beListedNum)
        dieoutNum.value.push(item.dieoutNum)
      })
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

const dataSource = reactive({
  color: ['#0b8abd', '#3abd79', '#3903d3', '#fe4157'],
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    icon: 'circle',
    left: 100,
    textStyle: {
      color: '#ffffff' // 设置图例文字颜色为白色
    },
    data: ['存栏', '进苗', '上市', '死淘']
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: true,
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      data: xData.value
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        lineStyle: {
          // 设置背景横线
          color: 'rgba(106, 110, 126,0.5)'
        }
      },
      axisLabel: {
        //y轴文字的配置
        textStyle: {
          color: '#fff'
        }
        // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
      }
    }
  ],
  series: [
    {
      name: '存栏',
      type: 'line',
      data: stockNum.value,
      smooth: true, //曲线
      areaStyle: {
        // 区域填充样式。设置后显示成区域面积图。
        color: {
          // 填充的颜色 -- 自定义区域渐变颜色
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#0b8abd'
            },
            {
              offset: 0.8,
              color: '#081e3d'
            }
          ]
        }
      }
    },
    {
      name: '进苗',
      type: 'line',
      data: collarSeedlingNum.value,
      smooth: true, //曲线
      areaStyle: {
        // 区域填充样式。设置后显示成区域面积图。
        color: {
          // 填充的颜色 -- 自定义区域渐变颜色
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#3abd79'
            },
            {
              offset: 0.8,
              color: '#081e3d'
            }
          ]
        }
      }
    },
    {
      name: '上市',
      type: 'line',
      data: beListedNum.value,
      smooth: true, //曲线
      areaStyle: {
        // 区域填充样式。设置后显示成区域面积图。
        color: {
          // 填充的颜色 -- 自定义区域渐变颜色
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#4a4bc9'
            },
            {
              offset: 0.8,
              color: '#1c59a8'
            }
          ]
        }
      }
    },
    {
      name: '死淘',
      type: 'line',
      symbol: 'circle',
      data: dieoutNum.value,
      smooth: true, //曲线
      areaStyle: {
        // 区域填充样式。设置后显示成区域面积图。
        color: {
          // 填充的颜色 -- 自定义区域渐变颜色
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#fe4157'
            },
            {
              offset: 0.8,
              color: '#042d60'
            }
          ]
        }
      }
    }
  ]
})

onMounted(() => {
  featchBiologicalAssetsInfo() // 初始化 cascaderData.value
})
</script>

<style scoped lang="scss">
.chartBox {
  width: 100%;

  &-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
  }

  &-detail {
    display: flex;

    &-left {
      display: flex;
      flex-direction: column;
      width: 180px;

      .info {
        margin-bottom: 20px;
        width: 180px;
        display: flex;
        .detail {
          margin-left: 20px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .num {
            width: 120px;
            font-size: 30px;
          }
          .text {
            font-size: 12px;
            font-weight: normal;
            color: #ccc;
          }
        }
      }
    }

    &-right {
      flex: 1;
    }
  }
}
</style>
